/**
 * Braze Banner Styling for EASYBANK Template
 *
 * This is the EASYBANK-specific version with adjusted width (750px vs 760px)
 * All other styling remains the same as standard template.
 *
 * Usage:
 * Include this CSS file in EASYBANK templates:
 * <link href="/InternetBanking/easybank/css/eb_braze.css" rel="stylesheet" />
 */

/* ============================================================================
   BRAZE BANNER CONTAINER - EASYBANK WIDTH
   ============================================================================ */

/**
 * Row wrapper: flex container for up to 3 banners displayed side-by-side.
 * - Uses flexbox with justify-content: center so that if 1 or 2 banners are
 *   missing (their containers stay hidden), the visible ones are automatically
 *   centered horizontally without any JavaScript.
 * - max-width matches EASYBANK content width (750px)
 */
.braze-banners-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    width: 750px;
    max-width: 100%;
    margin: 10px 10px 20px 2px; /* EASYBANK: left margin 2px (shifted 8px left vs default 10px) */
    padding: 0;
    box-sizing: border-box;
}

/**
 * Individual placement container
 * - flex: 1 1 0 so all visible slots share equal width
 * - Hidden by default; shown by SDK via inline style="display:block"
 * - overflow: visible so the Braze SDK's own card border, border-radius and
 *   rounded corners are NOT clipped by this wrapper.
 *   The Braze SDK injects its own card HTML with its own border-radius styling
 *   (visually larger/more-rounded than 4px); we must not override or clip it.
 */
[data-braze-placement] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;           /* Allows flex shrinking below content size */
    max-width: calc((750px - 32px) / 3); /* Max 1/3 of row minus gaps */
    margin: 0;
    padding: 0;
    display: none;          /* Hidden until SDK injects content */
    overflow: visible;      /* Let Braze's own card corners render naturally */
}

/**
 * When banner is visible (set by SDK via inline style)
 */
[data-braze-placement][style*="display: block"],
[data-braze-placement][style*="display:block"] {
    display: block !important;
}

/* ============================================================================
   INDIVIDUAL BANNER STYLING
   ============================================================================ */

/**
 * The Braze SDK injects an <iframe class="ab-html-banner"> as the direct child
 * of each [data-braze-placement] container (NOT a plain <div>).
 *
 * Inside the iframe's srcdoc the banner card (#ixal) has:
 *   border-radius: 12px   (same on all 3 banners)
 *   border: 0px solid     (banners 1 & 2 — no border from Braze)
 *   border: 1px solid     (banner 3 — border from Braze)
 *
 * Problems to fix:
 *   1. Banners 1 & 2 show no border  ? add border on the iframe itself
 *   2. Banner 3 top corners clipped  ? iframe has no border-radius, so it
 *      clips the inner card's 12px corners; fix: set border-radius on iframe
 *
 * Solution: style the iframe directly with border + border-radius:12px +
 * overflow:hidden so it matches the inner card and clips correctly.
 */
[data-braze-placement] > iframe.ab-html-banner,
[data-braze-placement] iframe[class*="ab-html-banner"] {
    display: block;
    width: 100% !important;
    border: 1px solid #D4D4D4;   /* Match Braze's own border color; fixes banners 1 & 2 */
    border-radius: 12px;          /* Match Braze's #ixal card radius; fixes Banner 3 corners */
    overflow: hidden;             /* Clip iframe content to rounded corners */
    box-sizing: border-box;
    margin-bottom: 16px;
}

[data-braze-placement] > iframe.ab-html-banner:last-child,
[data-braze-placement] iframe[class*="ab-html-banner"]:last-child {
    margin-bottom: 0;
}

/**
 * Fallback for non-iframe direct children (future-proofing)
 */
[data-braze-placement] > div,
[data-braze-placement] > *:not(iframe) {
    position: relative;
    width: 100%;
    max-height: 300px;
    margin-bottom: 16px;
    box-sizing: border-box;
    border: 1px solid #D4D4D4;
    border-radius: 12px;
    overflow: hidden;
}

[data-braze-placement] > div:last-child,
[data-braze-placement] > *:not(iframe):last-child {
    margin-bottom: 0;
}

/**
 * Banner images
 * - Responsive width
 * - Constrained height
 * - Maintains aspect ratio
 */
[data-braze-placement] img {
    width: 100%;
    height: auto;
    max-height: 300px; /* Match container max-height */
    display: block;
    object-fit: cover; /* Ensures image fills area nicely */
}

/**
 * Banner HTML content (if not using images)
 */
[data-braze-placement] .ab-banner-content,
[data-braze-placement] [class*="braze"] {
    max-height: 300px;
    overflow-y: auto; /* Scroll if content exceeds max-height */
}

/* ============================================================================
   HORIZONTAL ROW LAYOUT - CENTERING WHEN BANNERS ARE MISSING
   ============================================================================ */

/**
 * Each placement container holds exactly one banner injected by the SDK.
 * When a banner is missing, its container remains display:none and is
 * automatically excluded from the flex layout — the remaining visible
 * banner(s) are centered by justify-content: center on .braze-banners-row.
 *
 * Scenarios:
 *   3 banners visible  ? 3 columns, evenly distributed
 *   2 banners visible  ? 2 columns, centered in the row
 *   1 banner  visible  ? 1 column,  centered in the row
 */

/**
 * Individual banner elements injected by Braze SDK inside each placement slot
 */

/**
 * Loading placeholder (optional - can be set via JS)
 */
[data-braze-placement].braze-loading {
    display: block;
    min-height: 100px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: braze-loading-shimmer 1.5s infinite;
}

@keyframes braze-loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   BANNER CONTENT STYLING
   ============================================================================ */

/**
 * Text content within banners
 */
[data-braze-placement] h1,
[data-braze-placement] h2,
[data-braze-placement] h3 {
    margin: 0 0 12px 0;
    font-family: ff-din-web-1, Arial, sans-serif;
    line-height: 1.3;
}

[data-braze-placement] p {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

[data-braze-placement] a {
    color: #0066cc;
    text-decoration: none;
}

[data-braze-placement] a:hover {
    text-decoration: underline;
}

/**
 * Buttons within banners
 */
[data-braze-placement] button,
[data-braze-placement] .btn,
[data-braze-placement] a.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #84b816;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

[data-braze-placement] button:hover,
[data-braze-placement] .btn:hover,
[data-braze-placement] a.button:hover {
    background-color: #6a9412;
}

/* ============================================================================
   RESPONSIVE BEHAVIOR
   ============================================================================ */

/**
 * Tablet and smaller screens - stack banners vertically
 */
@media screen and (max-width: 800px) {
    .braze-banners-row {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        gap: 12px;
        margin: 10px 0 20px 0;
    }

    [data-braze-placement] {
        max-width: 100%;
        width: 100%;
    }

    [data-braze-placement] > div,
    [data-braze-placement] > * {
        max-height: 250px;
    }
}

/**
 * Mobile screens
 */
@media screen and (max-width: 480px) {
    .braze-banners-row {
        margin: 0 0 16px 0;
        gap: 10px;
    }

    [data-braze-placement] > div,
    [data-braze-placement] > * {
        max-height: 200px;
        margin-bottom: 0;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/**
 * High contrast mode support
 */
@media (forced-colors: active) {
    [data-braze-placement] {
        border: 1px solid;
    }

    [data-braze-placement] > div,
    [data-braze-placement] > * {
        border: 1px solid;
    }
}

/**
 * Reduced motion support
 */
@media (prefers-reduced-motion: reduce) {
    [data-braze-placement] *,
    [data-braze-placement]::before,
    [data-braze-placement]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

/**
 * Hide banners in print view
 */
@media print {
    [data-braze-placement] {
        display: none !important;
    }
}